<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        blockquote,
        body,
        dd,
        div,
        dl,
        dt,
        fieldset,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        img,
        input,
        li,
        ol,
        p,
        table,
        td,
        textarea,
        th,
        ul {
            margin: 0;
            padding: 0;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix:after {
            content: '.';
            display: block;
            overflow: hidden;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
            width: 0;
            height: 0;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        img {
            vertical-align: middle;
        }

        .page-shopping-cart {
            width: 1200px;
            margin: 50px auto;
            font-size: 14px;
            border: 1px solid #e3e3e3;
            border-top: 2px solid #317ee7;
        }

        .page-shopping-cart .cart-title {
            color: #317ee7;
            font-size: 16px;
            text-align: left;
            padding-left: 20px;
            line-height: 68px;
        }

        .page-shopping-cart .red-text {
            color: #e94826;
        }

        .page-shopping-cart .check-span {
            display: block;
            width: 24px;
            height: 20px;
            background: url("pictures/shopping_cart.png") no-repeat 0 0;
        }

        .page-shopping-cart .check-span.check-true {
            background: url("pictures/shopping_cart.png") no-repeat 0 -22px;
        }

        .page-shopping-cart .td-check {
            width: 70px;
        }

        .page-shopping-cart .td-product {
            width: 460px;
        }

        .page-shopping-cart .td-num,
        .page-shopping-cart .td-price,
        .page-shopping-cart .td-total {
            width: 160px;
        }

        .page-shopping-cart .td-do {
            width: 150px;
        }

        .page-shopping-cart .cart-product-title {
            text-align: center;
            height: 38px;
            line-height: 38px;
            padding: 0 20px;
            background: #f7f7f7;
            border-top: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
        }

        .page-shopping-cart .cart-product-title .td-product {
            text-align: center;
            font-size: 14px;
        }

        .page-shopping-cart .cart-product-title .td-check {
            text-align: left;
        }

        .page-shopping-cart .cart-product-title .td-check .check-span {
            margin: 9px 6px 0 0;
        }

        .page-shopping-cart .cart-product {
            padding: 0 20px;
            text-align: center;
        }

        .page-shopping-cart .cart-product table {
            width: 100%;
            text-align: center;
            font-size: 14px;
        }

        .page-shopping-cart .cart-product table td {
            padding: 20px 0;
        }

        .page-shopping-cart .cart-product table tr {
            border-bottom: 1px dashed #e3e3e3;
        }

        .page-shopping-cart .cart-product table tr:last-child {
            border-bottom: none;
        }

        .page-shopping-cart .cart-product table .product-num {
            border: 1px solid #e3e3e3;
            display: inline-block;
            text-align: center;
        }

        .page-shopping-cart .cart-product table .product-num .num-do {
            width: 24px;
            height: 28px;
            display: block;
            background: #f7f7f7;
        }

        .page-shopping-cart .cart-product table .product-num .num-reduce span {
            background: url("pictures/shopping_cart.png") no-repeat -40px -22px;
            display: block;
            width: 6px;
            height: 2px;
            margin: 13px auto 0 auto;
        }

        .page-shopping-cart .cart-product table .product-num .num-add span {
            background: url("pictures/shopping_cart.png") no-repeat -60px -22px;
            display: block;
            width: 8px;
            height: 8px;
            margin: 10px auto 0 auto;
        }

        .page-shopping-cart .cart-product table .product-num .num-input {
            width: 42px;
            height: 28px;
            line-height: 28px;
            border: none;
            text-align: center;
        }

        .page-shopping-cart .cart-product table .td-product {
            text-align: left;
            font-size: 12px;
            line-height: 20px;
        }

        .page-shopping-cart .cart-product table .td-product img {
            border: 1px solid #e3e3e3;
            margin-right: 10px;
        }

        .page-shopping-cart .cart-product table .td-product .product-info {
            display: inline-block;
            vertical-align: middle;
        }

        .page-shopping-cart .cart-product table .td-do {
            font-size: 12px;
        }

        .page-shopping-cart .cart-product-info {
            height: 50px;
            line-height: 50px;
            background: #f7f7f7;
            padding-left: 20px;
        }

        .page-shopping-cart .cart-product-info .delect-product {
            color: #666;
        }

        .page-shopping-cart .cart-product-info .delect-product span {
            display: inline-block;
            vertical-align: top;
            margin: 18px 8px 0 0;
            width: 13px;
            height: 15px;
            background: url("pictures/shopping_cart.png") no-repeat -60px 0;
        }

        .page-shopping-cart .cart-product-info .product-total {
            font-size: 14px;
            color: #e94826;
        }

        .page-shopping-cart .cart-product-info .product-total span {
            font-size: 20px;
        }

        .page-shopping-cart .cart-product-info .check-num {
            color: #333;
        }

        .page-shopping-cart .cart-product-info .check-num span {
            color: #e94826;
        }

        .page-shopping-cart .cart-product-info .keep-shopping {
            color: #666;
            margin-left: 40px;
        }

        .page-shopping-cart .cart-product-info .keep-shopping span {
            display: inline-block;
            vertical-align: top;
            margin: 18px 8px 0 0;
            width: 15px;
            height: 15px;
            background: url("pictures/shopping_cart.png") no-repeat -40px 0;
        }

        .page-shopping-cart .cart-product-info .btn-buy {
            height: 50px;
            color: #fff;
            font-size: 20px;
            display: block;
            width: 110px;
            background: #ff7700;
            text-align: center;
            margin-left: 30px;
        }

        .page-shopping-cart .cart-worder {
            padding: 20px;
        }

        .page-shopping-cart .cart-worder .choose-worder {
            color: #fff;
            display: block;
            background: #39e;
            width: 140px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            text-align: center;
            margin-right: 20px;
        }

        .page-shopping-cart .cart-worder .choose-worder span {
            display: inline-block;
            vertical-align: top;
            margin: 9px 10px 0 0;
            width: 22px;
            height: 22px;
            background: url("pictures/shopping_cart.png") no-repeat -92px 0;
        }

        .page-shopping-cart .cart-worder .worker-info {
            color: #666;
        }

        .page-shopping-cart .cart-worder .worker-info img {
            border-radius: 100%;
            margin-right: 10px;
        }

        .page-shopping-cart .cart-worder .worker-info span {
            color: #000;
        }

        .choose-worker-box {
            width: 620px;
            background: #fff;
        }

        .choose-worker-box .box-title {
            height: 40px;
            line-height: 40px;
            background: #F7F7F7;
            text-align: center;
            position: relative;
            font-size: 14px;
        }

        .choose-worker-box .box-title a {
            display: block;
            position: absolute;
            top: 15px;
            right: 16px;
            width: 10px;
            height: 10px;
            background: url("pictures/shopping_cart.png") no-repeat -80px 0;
        }

        .choose-worker-box .box-title a:hover {
            background: url("pictures/shopping_cart.png") no-repeat -80px -22px;
        }

        .choose-worker-box .worker-list {
            padding-top: 30px;
            height: 134px;
            overflow-y: auto;
        }

        .choose-worker-box .worker-list li {
            float: left;
            width: 25%;
            text-align: center;
            margin-bottom: 30px;
        }

        .choose-worker-box .worker-list li p {
            margin-top: 8px;
        }

        .choose-worker-box .worker-list li.cur a {
            color: #f70;
        }

        .choose-worker-box .worker-list li.cur a img {
            border: 1px solid #f70;
        }

        .choose-worker-box .worker-list li a:hover {
            color: #f70;
        }

        .choose-worker-box .worker-list li a:hover img {
            border: 1px solid #f70;
        }

        .choose-worker-box .worker-list li img {
            border: 1px solid #fff;
            border-radius: 100%;
        }
    </style>
</head>

<body>
<div class="page-shopping-cart" id="shopping-cart">
    <h4 class="cart-title">购物清单</h4>
    <div class="cart-product-title clearfix">
        <!--{'check-true':isSelectAll}-->
        <div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}"
                                       @click="isPro(isSelectAll)"></span>全选
        </div>
        <div class="td-product fl">商品</div>
        <div class="td-num fl">数量</div>
        <div class="td-price fl">单价(元)</div>
        <div class="td-total fl">金额(元)</div>
        <div class="td-do fl">操作</div>
    </div>
    <div class="cart-product clearfix">
        <table>
            <tbody>
            <!--遍历的时候带上索引-->
            <tr v-for="(item,index) in productList">
                <td class="td-check"><span class="check-span " :class="{'check-true':item.select}"
                                           @click="item.select = !item.select"></span></td>
                <td class="td-product"><img width="98" height="98" :src="item.pro_img">
                    <div class="product-info">
                        <h6>{{item.pro_name}}</h6>
                        <p>品牌：{{item.pro_brand}}&nbsp;&nbsp;产地：{{item.pro_place}}</p>
                        <p>配送仓储：{{item.pro_depot}}</p>
                    </div>
                    <!--<div class="clearfix"></div>-->
                </td>
                <td class="td-num">
                    <div class="product-num">
                        <a href="javascript:;" class="num-reduce num-do fl"
                           @click="item.pro_num > 0 ? item.pro_num-- : ''"><span></span></a>
                        <input type="text" class="num-input" v-model="item.pro_num">
                        <a href="javascript:;" class="num-add num-do fr" @click="item.pro_num++"><span></span></a>
                    </div>
                </td>
                <td class="td-price">
                    <p class="red-text">￥<span class="price-text">{{(item.pro_price).toFixed(2)}}</span></p>
                </td>
                <td class="td-total">
                    <p class="red-text">￥<span class="total-text">{{item.pro_price * item.pro_num}}</span>.00
                    </p>
                </td>
                <td class="td-do"><a href="javascript:;" class="product-delect"
                                     @click="deleteOne(index,item.pro_name)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="cart-product-info">
        <a class="delect-product" href="javascript:;" @click="deleteAll"><span></span>删除所选商品</a>
        <a class="keep-shopping" href=""><span></span>继续购物</a>
        <a class="btn-buy fr" href="javascript:;">去结算</a>
        <p class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></p>
        <p class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）：</p>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   let v= new Vue({
        el: '#shopping-cart',
        data: {
            productList: [{
                'pro_name': '纳尼亚传奇',//产品名称
                'pro_brand': '贾平凹',//作者
                'pro_place': '美国',//产地
                'pro_depot': '上海仓库',//所在仓库
                'pro_num': 3,//数量
                'pro_img': 'pictures/a1.jpg',//图片链接
                'pro_price': 2000,
                //单价
            },
                {
                    'pro_name': '格林童话',//产品名称
                    'pro_brand': '贾平凹',//作者
                    'pro_place': '美国',//产地
                    'pro_depot': '北京仓库',//所在仓库
                    'pro_num': 3,//数量
                    'pro_img': 'pictures/a1.jpg',//图片链接
                    'pro_price': 400,//单价
                },
                {
                    'pro_name': '杂志',//产品名称
                    'pro_brand': '贾平凹',//作者
                    'pro_place': '韩国',//产地
                    'pro_depot': '广州仓库',//所在仓库
                    'pro_num': 3,//数量
                    'pro_img': 'pictures/a1.jpg',//图片链接
                    'pro_price': 1000,//单价,
                    'select':"",
                }]
        },
       /*
    computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义.
    然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
    computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
    举例：总金额=价格*数量
       */
        computed: {
            isSelectAll: function () {
                //every是对数组的便利 所有元素都满足了就返回true有一个没满足返回false;
                return this.productList.every((val) => {
                    return val.select
                })
            },
            getTotal: function () {
                // 选出被选中的商品
                var _product = this.productList.filter(function (val) {
                        return val.select
                    }),
                    totalPrice = 0,
                    totalNum = 0
                _product.forEach((item) => {
                    totalPrice += item.pro_num * item.pro_price
                    totalNum += item.pro_num
                })
                return {
                    totalNum,
                    totalPrice
                }
            }
        },
        methods: {
            isPro(isSelectAll) {
                this.productList.forEach((item) => {
                    item.select = !isSelectAll
                })
            },
            deleteOne(index, name) {
                if (confirm(`你确定删除${name}这件商品吗?`)) {
                    this.productList.splice(index, 1)
                }
            },
            deleteAll() {
                // 可以怎么做
                this.productList = this.productList.filter(function (item) {
                    return !item.select
                })
            }
        },
       //钩子函数
       created() {
           this.productList.forEach((item) => {
               // item.select = true
               // Object.defineProperty()
               //参数一需要更新的数组或者对象 二:数组的下标活着对象的属性名 参数三:更新的内容
               this.$set(item, 'select', true)
           })
       },

    })
</script>

</html>